<template>
  <div class="app-container">
    <div class="app-title">
      <h2>请选择您需要的项目<em>？</em></h2>
    </div>
    <div class="image-list">
      <div class="image-item" v-for="(item, index) in anchorType" :key="item.id">
        <div class="image-item-box" @click="isChecked(index)">
          <van-image width="10rem" height="15rem" fit="cover" :src="item.image" radius="8" />
          <div class="cover">
            <div class="cover-box">
              <i>{{ item.title }}</i>
              <p>{{ item.context }}</p>
            </div>
          </div>
        </div>
        <div class="image-item-checked">
          <van-checkbox v-model="item.checked" shape="square"></van-checkbox>
        </div>
      </div>
    </div>
    <div class="submit-btn">
      <van-button type="primary" block @click="submitPay" :loading="isLoading" :disabled="totalMoney == 0 || isOrder">{{
        `支付(${totalMoney.toFixed(2)}元)`
      }}</van-button>
    </div>
    <van-popup v-model:show="showBottom" round position="bottom" closeable :style="{ height: '460px' }" teleport="body">
      <div class="pay-code">
        <van-row>
          <van-col span="24">
            <div class="order-number">
              <span style="color:#333">订单编号：</span>
              <span style="color:#333">{{ orderNumber }}</span>
            </div>
          </van-col>
          <van-col span="24">
            <div class="pay-code-image">
              <van-image width="20rem" height="20rem" fit="cover" :src="Img02" shape="square" />
            </div>
          </van-col>
        </van-row>
      </div>
    </van-popup>
    <van-popup v-model:show="showPayTypeBottom" round position="bottom" closeable title="选择支付方式" teleport="body">
      <div class="pay-type-title">
        请选择支付方式
      </div>
      <div class="pay-code">
        <van-row>
          <van-col span="24">
            <div class="order-number">
              <span style="color:#333">订单编号：</span>
              <span style="color:#333">{{ orderNumber }}</span>
            </div>
          </van-col>
          <form name=alipayment id="payFrom" action=http://test.dearweb.cn/epayapi.php method=post target="_self"
            class="form-main">
            <van-col span="24">
              <input size="30" name="WIDout_trade_no" :value="orderNumber" hidden />
            </van-col>
            <van-col span="24">
              <input size="30" name="WIDsubject" value="蜜知识付费高级会员（永久更新）" hidden />
            </van-col>
            <van-col span="24">
              <input size="30" name="WIDtotal_fee" :value="totalMoney.toFixed(2)" hidden />
            </van-col>
            <van-col span="24">
              <label><input type="radio" name="type" value="alipay" checked=""><span>支付宝</span></label>
            </van-col>
            <!-- <van-col span="24">
              <label><input type="radio" name="type" value="qqpay"><span>QQ钱包</span></label>
            </van-col> -->
            <van-col span="24">
              <label><input type="radio" name="type" value="wxpay"><span>微信支付</span></label>
            </van-col>
            <!-- <van-col span="24">
              <label><input type="radio" name="type" value="bank"><span>云闪付</span></label>
            </van-col> -->
            <van-col span="24">
              <button class="new-btn-login" type="submit" @click="submitPayType($event)">确 认</button>
            </van-col>
            <van-col span="24" v-if="isHavePaid">
              <div class="have-paid-btn">
                <van-button type="warning" block @click="havePaid">已支付</van-button>
              </div>
            </van-col>
          </form>
        </van-row>
      </div>
    </van-popup>
    <!-- 支付成功 -->
    <van-popup v-model:show="isHavePaidSuccess" round position="bottom" closeable teleport="body">
      <div class="pay-code pay-code-success">
        <van-row>
          <van-col span="24">
            <div class="order-number">
              <span style="color:#333">订单编号：</span>
              <span style="color:#333">{{ orderNumber }}</span>
            </div>
          </van-col>
          <van-col span="24" v-if="anchorTypeList.includes(1)">
            <div class="pay-code-image">
              请添加主播QQ：{{ anchorQQ }}
            </div>
          </van-col>
          <van-col span="24" v-if="anchorTypeList.includes(2)">
            <span>请添加相册群：</span>
            <div class="pay-code-image">
              <van-image width="20rem" height="20rem" fit="cover" :src="anchorQCode" shape="square" />
            </div>
          </van-col>
        </van-row>
      </div>
    </van-popup>
    <van-dialog v-model:show="show" title="标题" show-cancel-button>
      <img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" />
    </van-dialog>
  </div>
</template>
<script setup>

import { computed, reactive, toRefs, ref, onMounted } from "vue"
import { useRoute } from "vue-router"
import Img01 from "@/assets/image/img01.png"
import Img02 from "@/assets/image/img02.png"
import { showToast } from 'vant';
import {
  OrderGetCode, // 新增订单
  CreateOrder, // 新增订单
  OrderStates, // 订单状态查询
} from "@/api/index.js"

const route = useRoute()

const state = reactive({
  anchorType: [
    {
      id: 1,
      title: "面对面视频",
      image: Img01,
      checked: false,
      money: 0.1,
      context: "198.00/10分钟"
    },
    {
      id: 2,
      title: "查看相册",
      image: Img02,
      checked: true,
      money: 0.1,
      context: "68.00",
    }
  ],
  orderNumber: "", // 订单编号
  isOrder: false
})

const { anchorType, orderNumber, isOrder } = toRefs(state)

const isChecked = (index) => {
  state.anchorType[index].checked = !state.anchorType[index].checked
}

const totalMoney = computed(() => {
  state.isOrder = false
  return state.anchorType.filter(o => o.checked).reduce((pcr, cur) => {
    return pcr + cur.money
  }, 0)
})

let showBottom = ref(false)
let isLoading = ref(false)
let isHavePaid = ref(false)
let payTypes = ref(2) // 1 扫码支付  2 在线支付

let showPayTypeBottom = ref(false) // 选择支付方式

const payOrder = async () => {
  console.log(route)
  let params = {
    "anchorId": route.query.id,
    "payAmount": state.anchorType.filter(o => o.checked).reduce((cur, pro) => (cur + pro.money), 0),
    types: state.anchorType.filter(o => o.checked).map(o => o.title).join(",")
  }
  isLoading.value = true
  try {
    let data = await CreateOrder(params)
    state.orderNumber = data.data.orderNo
    if (payTypes.value == 1) {
      showBottom.value = true
    } else {
      showPayTypeBottom.value = true
    }
    isOrder.value = true
    isLoading.value = false
  } catch (error) {
    showToast('订单创建失败，请联系管理员');
    // isOrder.value = true
    isLoading.value = false
  }
}

// 提交支付
const submitPay = () => {
  payOrder()
}

const getOrderCode = async () => {
  let data = await OrderGetCode()
}

const isWeixinBrowser = () => {
  let ua = navigator.userAgent.toLowerCase();
  return /micromessenger/.test(ua) ? true : false;
}


const submitPayType = (e) => {
  e.preventDefault()
  let payFromDom = document.getElementById('payFrom')
  isHavePaid.value = true
  payFromDom.submit()
}

let isHavePaidSuccess = ref(false)
let anchorQQ = ref("")
let anchorQCode = ref("")
let anchorTypeList = ref([])
const havePaid = async () => {
  let params = {
    orderNo: state.orderNumber,
    // orderNo: 'DD2023110300008',
    h5Id: route.query.h5Id
  }
  try {
    let { data } = await OrderStates(params)
    anchorTypeList.value = state.anchorType.filter(o => o.checked).map(o => o.id)
    console.log(data, 'data')
    anchorQQ.value = data.qq
    anchorQCode.value = data.qrCode
    isHavePaidSuccess.value = true
  } catch (error) {
    showToast('订单支付失败，请联系管理员');
  }
}

onMounted(() => {
  getOrderCode()
})

</script>



<style lang="scss" scoped>
.app-container {
  max-width: 500px;
  margin: 0 auto;
}

.app-title {
  margin: 40px 20px 30px 20px;
  font-size: 14px;

  em {
    font-size: 14px;
    margin-left: 5px;
  }
}

.image-list {
  display: flex;

  .image-item {
    margin-left: 1rem;
    height: 15rem;

    .image-item-checked {
      display: flex;
      justify-content: center;
      margin-top: 10px;
    }
  }
}

.image-item-box {
  position: relative;
  height: 15rem;
  border-radius: 8px;
  overflow: hidden;

  .cover {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);
    text-align: center;
    line-height: 15rem;
    color: #fff;
    font-size: 20px;
    font-style: italic;
    display: flex;
    justify-content: center;
    align-items: center;

    .cover-box {
      line-height: 1;

      p {
        font-size: 1rem;
        margin-top: 5px;
      }
    }
  }
}

.submit-btn {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.pay-code {
  text-align: center;
  // padding-top: 40px;

  .order-number {
    font-size: 20px;
    font-weight: normal;
    margin-bottom: 20px;
  }
}

.form-main {
  width: 100%;
}

.pay-type-title {
  font-size: 18px;
  text-align: center;
  padding: 20px 0;
  color: #333;
}

label {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  line-height: 40px;
  height: 40px;
  padding: 0 20px;
  box-sizing: border-box;
}

.new-btn-login {
  padding: 0px;
  width: calc(100% - 40px);
  background: #1989fa;
  color: #fff;
  border: none;
  line-height: 48px;
  height: 48px;
  margin: 20px;
  border-radius: 4px;
}

.have-paid-btn {
  margin: 0 20px 20px 20px;
}

.pay-code-success {
  margin-top: 40px;
  padding-bottom: 40px;

  .pay-code-image {
    margin-top: 10px;
    color: #333 !important
  }
}

span {
  color: #333 !important;
}
</style>
